
import React, { useState, useEffect } from 'react';
import Router from 'next/router'
import Link from 'next/link';

import { Row, Col, Menu } from 'antd'
import { HomeTwoTone, VideoCameraTwoTone, MessageTwoTone, SmileTwoTone } from '@ant-design/icons';

import axios from 'axios'
import servicePath from '../config/apiUrl'

import styles from '../styles/components/Header.module.css'

const Header = () => {
  const [navArray, setNavArray] = useState([])
  // 获取类别
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(servicePath.getTypeInfo).then(res => {
        setNavArray(res.data.data.result)
        return res.data.data.result
      })
      setNavArray(result)
    }
    fetchData()
  }, [])
  // 跳转列表页
  const skipToList = ({ key }) => {
    if (key === '0') {
      Router.push('/')
    } else {
      Router.push('/list?id=' + key)
    }
  }
  return (
    <div className={styles.header}>
      <Row type="flex" justify="center">
        <Col xs={24} sm={24} md={10} lg={15} xl={11}>
          <span className={styles.header_logo}>
            <Link href={{ pathname: '/' }}>
              <a>Alomy</a>
            </Link>
          </span>
          <span className={styles.header_txt}>梦想世界和平。</span>
        </Col>
        <Col className={styles.menu_div} xs={0} sm={0} md={14} lg={8} xl={7}>
          <Menu onClick={skipToList} mode="horizontal" className={styles.ant_menu}>
            <Menu.Item className={styles.ant_menu_item} key="0" icon={<HomeTwoTone />}>
              首页
            </Menu.Item>
            {
              navArray.map(item => {
                return (
                  <Menu.Item
                    className={styles.ant_menu_item}
                    key={item.Id}
                    icon={item.Id === 1 ? <VideoCameraTwoTone /> : item.Id === 2 ? <MessageTwoTone /> : <SmileTwoTone />}>
                    {item.typeName}
                  </Menu.Item>
                )
              })
            }
          </Menu>
        </Col>
      </Row>
    </div>
  )

}

export default Header
